<template>
	<view class="ma">
		<vcustomer style="width: 100%;" :linkdata="mydata.linkdata">
			<view class="titleBar" :style="blockStyle">
				<view class="txt">
					<text :class="mydata.content.left_icon" :style="colorLeftIcon" v-if="mydata.titleBarType == 0"></text>
					<text class="txt-bar" v-if="mydata.titleBarType == 1" :style="barStyle"></text>
					<text class="txt-bar2" v-if="mydata.titleBarType == 2" :style="barStyle"></text>
					&nbsp;{{ mydata.content.left }}
					<text class="txt-bar2" v-if="mydata.titleBarType == 2" :style="barStyle"></text>
				</view>
				<view class="cright" :style="posRightStyle" v-if="mydata.titleBarType == 0 || mydata.titleBarType == 1">
					{{ mydata.content.right }}&nbsp;
					<text :class="mydata.content.right_icon" :style="colorRightIcon"></text>
				</view>
			</view>
		</vcustomer>
	</view>
</template>

<script>
import util from '@/common/util.js';
export default {
	data() {
		return {};
	},
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	computed: {
		blockStyle() {
			let s = '' + 'margin:' + this.mydata.margin.top * 2 + 'rpx ' + this.mydata.margin.lr + 'rpx ' + this.mydata.margin.bottom + 'rpx;';
			s += 'border-radius:' + this.mydata.radius + 'rpx;';
			s += 'background:' + this.mydata.color.bg + ';';
			s += 'color:' + this.mydata.color.left + ';';
			s += 'justify-content:' + this.mydata.posAlign + ';';
			return s;
		},
		colorLeftIcon() {
			return 'color:' + this.mydata.color.left_icon + ';';
		},
		posRightStyle() {
			let s = 'right:' + this.mydata.margin.lr / 2 + 'rpx;';
			s += 'color:' + this.mydata.color.right + ';';
			return s;
		},
		colorRightIcon() {
			return 'color:' + this.mydata.color.right_icon + ';';
		},
		barStyle() {
			let s = 'background:' + this.mydata.bar.bg + ';';
			s += 'width:' + this.mydata.bar.width * 2 + 'rpx;';
			s += 'height:' + this.mydata.bar.height * 2 + 'rpx;';
			return s;
		}
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.ma {
	width: 100%;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.titleBar {
	display: flex;
	//justify-content:flex-start;
	// width: 100%;
	//background: #fff;
	height: 72rpx;
	line-height: 72rpx;
	display: flex;
	position: relative;

	.txt {
		margin: 0;
		padding: 0 20rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.txt-bar {
			margin-right: 16rpx;
		}
		.txt-bar2 {
			width: 100rpx;
			height: 10rpx;
			background: #fbda41;
			margin: 0rpx 20rpx;
		}
	}

	.cright {
		position: absolute;
		//right: 0;
		top: 0;
		line-height: 72rpx;
		font-size: 24rpx;
		margin: 0;
		padding: 0 10rpx;
		font-size: 24rpx;
	}
}
</style>
